<template>
  <div class="content-center" style="overflow: auto;">
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="4">
        <div class="content-breadcrumb">
          <el-breadcrumb separator="/" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>审计文书模板</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
      <el-col :span="20">
        <div style="padding:10px 0 10px 0">
          <el-button type="primary" size="mini" icon="el-icon-document-add" :disabled="disabled1" @click="addDoc()">添加模板分类</el-button>
          <el-button type="primary" size="mini" icon="el-icon-delete" :disabled="disabled" @click="delDoc()">删除模板分类</el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit" :disabled="disabled" @click="updDoc()">修改模板分类</el-button>
        
          <el-button type="primary" size="mini" icon="el-icon-document-add" :disabled="disabled1" @click="addDocMould()">添加模板文书</el-button>
          <el-button type="primary" size="mini" icon="el-icon-delete" @click="delDocMould()">删除模板文书</el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="updDocMould()">修改模板文书</el-button>
        
          <el-button type="primary" size="mini" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="refresh()">刷新</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 分类 -->
    <el-row>
      <el-col :span="6">
        <div class="content-cotainer1 border-box" style="height: 500px;">
          <div class="audit-content">
            <div class="centent-title"><span>文书模板分类</span></div>
            <!-- 分类树 -->
            <div class="centent-inner1">
              <el-tree :data="treeData" :props="defaultProps" show-checkbox ref="tree" lazy
              highlight-current :load="loadnext" check-strictly check-on-click-node node-key="id"
              :default-expanded-keys="idArr" @node-click="handleNodeClick" @check-change="checkChange"></el-tree>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <!-- 列表 -->
        <div class="content-cotainer2 border-box" style="height: 500px;">
          <div class="audit-content" style="margin-left: 10px;">
            <div class="centent-title"><span>文书模板列表</span></div>
            <!-- 页面内容 -->
            <div class="centent-inner2">
              <el-table ref="multipleTable" :data="tableData" stripe style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="模板名称" width="250" show-overflow-tooltip></el-table-column>
                <el-table-column prop="explain" label="模板说明" width="340" show-overflow-tooltip></el-table-column>
                <el-table-column prop="type" label="模板类型" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="scope.row.type === '1'">证据</span>
                    <span v-else-if="scope.row.type === '2'">取证单</span>
                    <span v-else-if="scope.row.type === '3'">工作底稿</span>
                    <span v-else-if="scope.row.type === '4'">报告</span>
                  </template>
                </el-table-column>
              </el-table>
              <div style="text-align: center;margin-top:10px">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20, 50]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="tableData.length">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 模板分类弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="docDialog" :show-close="false" width="40%">
      <el-form :label-position="labelPosition" label-width="90px" size="small" :model="docForm">
        <el-form-item label="文书标题">
          <el-input v-model="docForm.sysDocuTitle" style="width:400px" clearable placeholder="请输入文书标题"></el-input>
        </el-form-item>
        <el-form-item label="文书描述">
          <el-input v-model="docForm.sysDocuDsc" style="width:400px" clearable placeholder="请输入文书描述"></el-input>
        </el-form-item>
        <el-form-item label="文书类型">
          <el-select v-model="docForm.sysDocuType" clearable placeholder="请选择文书类型">
            <el-option label="可修改" value="20"></el-option>
            <el-option label="不可修改" value="10"></el-option>
          </el-select>
        </el-form-item>
        <div style="text-align: center; margin-top:20px">
          <el-button type="primary" style="width:100px" @click="docSubmitForm()">提交</el-button>
          <el-button type="primary" style="width:100px; margin-left:60px" @click="docCancel()">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 文书模板弹框 -->
    <el-dialog :title="dialogTitle" :visible.sync="docMouldDialog" :show-close="false" width="40%">
      <el-form :label-position="labelPosition" label-width="100px" size="small" :model="docMouldForm">
        <el-form-item label="模板标题">
          <el-input v-model="docMouldForm.docuMouldTitle" clearable placeholder="请输入报告模板标题"></el-input>
        </el-form-item>
        <el-form-item label="模板说明">
          <el-input v-model="docMouldForm.docuMouldDsc" clearable placeholder="请输入报告模板说明"></el-input>
        </el-form-item>
        <el-form-item label="模板类型">
          <el-select v-model="docMouldForm.docuMouldType" clearable placeholder="请选择模板类型">
            <el-option label="证据" value="1"></el-option>
            <el-option label="取证单" value="2"></el-option>
            <el-option label="工作底稿" value="3"></el-option>
            <el-option label="报告" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板文件">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-remove="handleRemove" :on-change="handleChange" multiple :auto-upload="false"
            :limit="1" :on-exceed="handleExceed" :file-list="fileList">
            <el-button size="small" type="primary">上传模板</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
        <div style="text-align: center; margin-top:20px">
          <el-button type="primary" style="width:100px" @click="docMouldSubmitForm()">提交</el-button>
          <el-button type="primary" style="width:100px; margin-left:60px" @click="docMouldCancel()">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios"
import { log } from 'util';
import {queryTOesSysDoc,addTOesSysDoc,updateTOesSysDoc,deleteTOesSysDoc,
queryTOesDocMould1,deleteTOesDocMould,addTOesDocMould,updateTOesDocMould} from '@/api'
  export default {
    data() {
      return {
        treeData: [],
        tableData: [],
        multipleSelection: [],
        idArr: [],
        fileList:[],
        docDialog:false,
        docMouldDialog:false,
        currentPage:1, //初始页
        pagesize:10,    //    每页的数据
        disabled: false,
        disabled1: false,
        editCheckId:'',
        dialogTitle:'',
        labelPosition: 'right',
        docForm: {
          sysDocuTitle:'',
          sysDocuDsc:'',
          sysDocuType:''
        },
        docMouldForm: {
          docuMouldTitle:'',
          docuMouldDsc:'',
          docuMouldType:'',
        },
        defaultProps: {
          id: 'id',
          label: 'label'
        }
      }
    },
    mounted () {
      let params = {parentDocuId:'00000000'}
      this.treeData = []
      queryTOesSysDoc(params).then((response) => {
        this.treeData.push({
          id: response.list[0].sysDocuId,
          label: response.list[0].sysDocuTitle,
          sysDocuDsc: response.list[0].sysDocuDsc
        })
        this.idArr.push(response.list[0].sysDocuId)
      }).catch((err) => {
        console.log(err)
      })
    },
    methods: {
      handleRemove(file, fileList) {
        this.fileList=fileList
      },
      handleChange(file,fileList){
        this.fileList=fileList
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      loadnext(node, resolve){
        node.data.children = []
        let params = {parentDocuId:node.data.id}
        queryTOesSysDoc(params).then((response) => {
          if (response && response.list.length > 0) {
            let arr = []
            response.list.forEach(item =>{
              arr.push({
                id: item.sysDocuId,
                label: item.sysDocuTitle,
                sysDocuDsc: item.sysDocuDsc,
                sysDocuType: item.sysDocuType,
                parentDocuId: item.parentDocuId
              })
            })
            node.data.children = arr
            return resolve (node.data.children)
          }
          return resolve (node.data.children)
        }).catch((err) => {
          console.log(err)
        })
      },
      checkChange(item, node, self){
        if (node==true) {//点击未选中复选框
          this.editCheckId = item.id;
          this.$refs.tree.setCheckedKeys([item.id]);
          console.log(item)
          if(item.id == "90000001"){
            this.disabled = true
            this.disabled1 = true
          }else{
            if(item.sysDocuType == "10"){
              this.disabled = true
              this.disabled1 = false
            }else{
              this.disabled = false
              this.disabled1 = false
            }
          }
        }
      },
      handleNodeClick(data,Node) {
        if (Node==true) {
          this.editCheckId = data.id;
          this.$refs.tree.setCheckedKeys([data.id]);
        }
        let entity = {sysDocuId:Node.data.id}
        let params = {
          entity:entity,
          pageNum:1,
          pageSize:10
        }
        let label = Node.data.label
        this.tableData = []
        queryTOesDocMould1(params).then((response) => {
          if (response != null && response.list.length > 0) {
            let tableArr = []
            response.list.forEach(item =>{
              tableArr.push({
                id: item.docuMouldId,
                name: item.docuMouldTitle,
                explain: item.docuMouldDsc,
                type: item.docuMouldType,
                class: label
              })
            })
            this.tableData = tableArr
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange: function (size) {
        this.pagesize = size;//每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;//点击第几页
      },
      addDoc(){
        let trees = this.$refs.tree.getCheckedNodes();
        if(trees.length == 0){
          this.$message.warning('请勾选一个节点！')
        }else if(trees.length == 1){
            // this.$router.push({
            //   name: 'addDoc',
            //   query:{item:trees[0],flag:"add"}
            // })
            this.dialogTitle = "添加模板分类"
            //this.docForm = []
            this.docDialog = true
        }else{
          this.$message.warning('添加时只能勾选一个节点！')
        }
      },
      docCancel(){
        this.docForm = {
          sysDocuTitle:'',
          sysDocuDsc:'',
          sysDocuType:''
        }
        this.docDialog = false
      },
      docMouldCancel(){
        this.docMouldForm = {
          docuMouldTitle:'',
          docuMouldDsc:'',
          docuMouldType:'',
        }
        this.fileList = []
        this.docMouldDialog = false
      },
      docSubmitForm(){
        let trees = this.$refs.tree.getCheckedNodes()
        let item = trees[0]
        let flag = this.dialogTitle
        let msge = ''
        if(!this.docForm.sysDocuTitle){
          msge += '文书标题不能为空！'
        }
        if(!this.docForm.sysDocuDsc){
          msge += '文书描述不能为空！'
        }
        if(!this.docForm.sysDocuType){
          msge += '文书类型不能为空！'
        }
        if(msge){
          this.$message.warning(msge)
          return
        }
        const loading = this.$loading({
          lock: true,
          text: '正在提交',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        if(flag=="添加模板分类"){
          let params = {
            parentDocuId: item.id,
            sysDocuTitle: this.docForm.sysDocuTitle,
            sysDocuDsc: this.docForm.sysDocuDsc,
            isRootNode: false,
            sysDocuType: this.docForm.sysDocuType,
            rcrdCrtpsnId:'0001',
            rcrdCrtpsnNm:'管理员',
            rcrdUptpsnId:'0001',
            rcrdUptpsnNm:'管理员'
          };
          addTOesSysDoc(params).then((response) => {
            loading.close()
            if(response.resultCode=="200"){
              this.$message.success('添加模板分类成功！')
              this.docCancel()
              this.refresh();
            }else{
              this.$message.error('添加模板分类失败！');
            }
          }).catch((err) => {
            console.log(err)
          })
        }else{
          let params = {
            sysDocuId: item.id,
            sysDocuTitle: this.docForm.sysDocuTitle,
            sysDocuDsc: this.docForm.sysDocuDsc,
            isRootNode: false,
            sysDocuType: this.docForm.sysDocuType,
            rcrdCrtpsnId:'0001',
            rcrdCrtpsnNm:'管理员',
            rcrdUptpsnId:'0001',
            rcrdUptpsnNm:'管理员'
          };
          updateTOesSysDoc(params).then((response) => {
            loading.close();
            if(response.resultCode=="200"){
              this.$message.success('修改模板分类成功！')
              this.docCancel()
              this.refresh();
            }else{
              this.$message.error('修改模板分类失败！');
            }
            
          }).catch((err) => {
            console.log(err)
          })
        }
      },
      delDoc(){
        let trees = this.$refs.tree.getCheckedNodes();
        if(trees.length == 0){
          this.$message.warning('请勾选一个节点！')
        }else if(trees.length == 1){
          let ids = {sysDocuId:trees[0].id}
          if(trees[0].sysDocuType!="10"){
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(() => {
              deleteTOesSysDoc(ids).then((response) => {
                if (response.resultCode == "200") {
                  this.$message.success('删除模板分类成功！')
                  this.refresh();
                }else{
                  this.$message.error('删除模板分类失败！');
                }
              }).catch((err) => {
                console.log(err);
              })
            })
          }else{
            this.$message.warning('不能删除不可修改的节点！')
          }
        }else{
          this.$message.warning('删除时只能勾选一个节点！')
        }
      },
      updDoc(){
        let trees = this.$refs.tree.getCheckedNodes();
        if(trees.length == 0){
          this.$message.warning('请勾选一个节点！')
        }else if(trees.length == 1){
          // this.$router.push({
          //   name: 'addDoc',
          //   query:{item:trees[0],flag:"upd"}
          // })
          let item = trees[0]
          let docForm = {
            sysDocuTitle: item.label,
            sysDocuDsc: item.sysDocuDsc,
            sysDocuType: item.sysDocuType
          }
          this.docForm = docForm
          this.dialogTitle = "修改模板分类"
          this.docDialog = true
        }else{
          this.$message.warning('修改时只能勾选一个节点！')
        }
      },
      addDocMould(){
        let trees = this.$refs.tree.getCheckedNodes();
        if(trees.length == 0){
          this.$message.warning('请勾选一个节点！')
        }else if(trees.length == 1){
          // this.$router.push({
          //   name: 'addDocMould',
          //   query:{sysDocuId:trees[0].id,flag:"add"}
          // })
          this.dialogTitle = "添加文书模板"
          //this.docMouldForm = []
          this.docMouldDialog = true
        }else{
          this.$message.warning('添加时只能勾选一个节点！')
        }
      },
      delDocMould(){
        let ids = [];
        this.multipleSelection.forEach(item =>{
          ids.push(item.id);
        })
        if(ids.length > 0){
          this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            deleteTOesDocMould(ids).then((response) => {
              if (response.resultCode == "200") {
                this.$message.success('删除文书模板成功！')
              }else{
                this.$message.error('删除文书模板失败！');
              }
              this.search()
            }).catch((err) => {
              console.log(err);
            })
          })
        }else{
          this.$message.warning('请勾选数据！')
        }
      },
      updDocMould(){
        let items = [];
        this.multipleSelection.forEach(item =>{
          items.push(item);
        });
        if(items.length == 0){
          this.$message.warning('请勾选一条数据！')
        }else if(items.length == 1){
          // this.$router.push({
          //   name: 'addDocMould',
          //   query:{item:items[0],flag:"upd"}
          // })
          let item = items[0]
          let docMouldForm = {
            docuMouldTitle: item.name,
            docuMouldDsc: item.explain,
            docuMouldType: item.type
          };
          this.docMouldForm = docMouldForm;
          this.dialogTitle = "修改文书模板"
          this.docMouldDialog = true
        }else{
          this.$message.warning('修改时只能勾选一条数据！')
        }
      },
      docMouldSubmitForm(){
        let msge = ''
        if(!this.docMouldForm.docuMouldTitle){
          msge += '模板标题不能为空！'
        }
        if(!this.docMouldForm.docuMouldDsc){
          msge += '模板说明不能为空！'
        }
        if(!this.docMouldForm.docuMouldType){
          msge += '模板类型不能为空！'
        }
        if(msge){
          this.$message.warning(msge)
          return
        }
        const loading = this.$loading({
          lock: true,
          text: '正在提交',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let flag = this.dialogTitle
        if(flag=="添加文书模板"){
          let trees = this.$refs.tree.getCheckedNodes();
          let sysDocuId = trees[0].id;
          let params = {
            docuMouldTitle: this.docMouldForm.docuMouldTitle,
            docuMouldDsc: this.docMouldForm.docuMouldDsc,
            docuMouldType: this.docMouldForm.docuMouldType,
            sysDocuId: sysDocuId,
            rcrdCrtpsnId:'0001',
            rcrdCrtpsnNm:'管理员',
            rcrdUptpsnId:'0001',
            rcrdUptpsnNm:'管理员'
          };
          addTOesDocMould(params).then((response) => {
            loading.close();
            if(response.resultCode=="200"){
              this.$message.success('添加文书模板成功！')
              this.docMouldCancel()
              this.search();
            }else{
              this.$message.error('添加文书模板失败！');
            }
          }).catch((err) => {
            console.log(err)
          })
        }else{
          let items = [];
          this.multipleSelection.forEach(item =>{
            items.push(item);
          });
          let item = items[0]
          let params = {
            docuMouldId: item.id,
            docuMouldTitle: this.docMouldForm.docuMouldTitle,
            docuMouldDsc: this.docMouldForm.docuMouldDsc,
            docuMouldType: this.docMouldForm.docuMouldType,
            rcrdCrtpsnId:'0001',
            rcrdCrtpsnNm:'管理员',
            rcrdUptpsnId:'0001',
            rcrdUptpsnNm:'管理员'
          };
          updateTOesDocMould(params).then((response) => {
            loading.close();
            if(response.resultCode=="200"){
              this.$message.success('修改文书模板成功！')
              this.docMouldCancel()
              this.search();
            }else{
              this.$message.error('修改文书模板成功！');
            }
          }).catch((err) => {
            console.log(err)
          })
        }
      },
      search(){
        let trees = this.$refs.tree.getCheckedNodes();
        let sysDocuId = trees[0].id;
        let entity = {sysDocuId:sysDocuId}
        let params = {
          entity:entity,
          pageNum:1,
          pageSize:10
        }
        let label = trees[0].label
        this.tableData = []
        queryTOesDocMould1(params).then((response) => {
          if (response != null && response.list.length > 0) {
            let tableArr = []
            response.list.forEach(item =>{
              tableArr.push({
                id: item.docuMouldId,
                name: item.docuMouldTitle,
                explain: item.docuMouldDsc,
                type: item.docuMouldType,
                class: label
              })
            })
            this.tableData = tableArr
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      refresh(){
        this.tableData = []
        let params = {parentDocuId:'00000000'}
        this.treeData = []
        this.idArr = []
        queryTOesSysDoc(params).then((response) => {
          this.treeData.push({
            id: response.list[0].sysDocuId,
            label: response.list[0].sysDocuTitle,
            sysDocuDsc: response.list[0].sysDocuDsc,
            sysDocuType: response.list[0].sysDocuType
          })
          this.idArr.push(response.list[0].sysDocuId)
        }).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.content-breadcrumb {
    padding-left: 20px;
}
.content-cotainer1 {
    padding: 0 15px 0 20px;
    height: 100%;
    width: 100%;
    .centent-inner1 {
        padding: 15px 20px 20px 15px;
    }
}
.content-cotainer2 {
    padding-right: 20px;
    height: 100%;
    width: 100%;
    .centent-inner2 {
        padding: 15px 20px 20px 15px;
    }
}
</style>